<template>
 <div>
    <el-dialog title="收货地址" :visible.sync="sonData.dialogStats" @open="openDialog" @close="closeDialog">
        <!-- 气泡框 -->
        <el-popover
            v-model="visible"
            placement="right">
                <!-- 级联选择器 -->
                <el-cascader
                placeholder="试试搜索：手机"
                v-model="selectCategorys"
                :options="categorys"
                :props="props"
                filterable></el-cascader>
                <div style="text-align: right; margin: 2px">
                    <el-button size="mini" type="text" @click="resetCategorys">取消</el-button>
                    <el-button type="primary" size="mini" @click="saveCategorys">确定</el-button>
                </div>
            <el-button slot="reference">新增关联</el-button>
        </el-popover>
        
        <!-- 表格 -->
        <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
            prop="#"
            label="#"
            width="180">
        </el-table-column>
        <el-table-column
            prop="brandName"
            label="品牌名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="catelogName"
            label="分类"
            width="180">
        </el-table-column>
        <el-table-column
            label="操作">
            <template slot-scopt="scope">
                <el-button size="mini" type="primary" @click="saveCategorys">修改</el-button>
                <el-button type="primary" size="mini" @click="saveCategorys">删除</el-button>
            </template>
        </el-table-column>
            
        </el-table>
    </el-dialog>
 </div>
</template>

<script>
import { getBrandCategoryRelation, brandCategoryRelation } from "@/api/brand"
 export default {
   name: '',
   props: {
        sonData:{
           type:Object,
           defalut:{}
        }
   },
   components: {

   },
   data () {
     return {
        //需要关联的数据ID
        dataForm:{
            categoryId:0,
            brandId:0,
        },
        visible:false,
        selectCategorys:[],
        tableData:[],
        props:{value:'catId',label:'name'},
     }
   },
   methods: {
        //取消选择关联
        resetCategorys(){
            this.selectCategorys = [];
            this.visible = false;
        },
        //保存关联
        saveCategorys(){
            this.dataForm.categoryId = this.selectCategorys[this.selectCategorys.length-1];
            this.selectCategorys = [];
            this.visible = false;
            brandCategoryRelation(this.dataForm).then(({code})=>{
                if(code && code === 0){
                    this.sonData.dialogStats = false;
                    this.getDataList();
                }
            })
            //    console.log(this.dataForm)
        },

        getDataList(){
            getBrandCategoryRelation(this.dataForm.brandId).then(({data})=>{
                if(data && data.list){
                    this.tableData = data.list;
                }
            })
        },

        openDialog(){
            this.getDataList();
        },

        closeDialog(){
            this.dataForm = {};
            this.tableData = [];
        },
   },
   mounted() {

   },
   watch: {
        sonData:{
            handler(newVal,oldVal){
                this.dataForm.brandId = newVal.brandId;
            },
            deep: true
        }

   },
   created(){
       this.$store.dispatch("mystore/getCategorys");
   },
   computed: {
       categorys(){
            return this.$store.state.mystore.categorys;
       }
   },
   filters: {

   }
 }
</script>

<style scoped lang='scss'>

</style>